<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>

      <div class="form-group">
        <span class="form-label">规划名称:</span>
        <input
          type="text"
          name="key"
          v-model="selectedOptions.titleLike"
          id="searchInput"
          ref="searchInput"
          placeholder="请输入规划名称"
          style="width: 500px;"
          @keyup.enter="searchSubmit()"
        >
        <div class="form-submit-right">
          <el-button type="warning" size="small" @click.stop="searchSubmit()">查询</el-button>
          <el-button type="info" size="small" @click.stop="searchReset()">重置</el-button>
        </div>
      </div>

      <transition name="fade1">
        <div v-if="!showall">
          <div :class="{showall:true,active:showall}">
            <el-divider></el-divider>
            <avue-search :option="option" v-model="selectedOptions" @change="handleChange"></avue-search>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="showall">
          <div :class="{showall:true,active:showall}">
            <el-divider></el-divider>
            <avue-search
              :option="option"
              v-model="selectedOptions"
              @change="handleChange"
              class="avue-search-group"></avue-search>
          </div>
        </div>
      </transition>
      <div class="search-collapse">
        <div class="collapse-title" :class="{active:showall}" v-on:click="showall=!showall">
          <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
          <p v-if="!showall" class="collapse-title-text">展开搜索条件</p>
          <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
          <p v-if="showall" class="collapse-title-text">收起搜索条件</p>
        </div>
      </div>

      <div style="margin-top: 18px;margin-left: 10px;font-weight: 600;">搜索结果列表</div>

      <div class="card-body">
        <avue-crud :data="resultListData"
                   :option="tableoption"
                   :page="page"
                   :table-loading="tableLoading"
                   @on-load="getResultList"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   class="menu-min-height">
          <template slot-scope="scope" slot="menu">
            <!--一般专项：提交审批-->
            <div class="menu-title" @click.stop="approvalRelease(scope.row,scope.index)"
                 v-if="!scope.row.hasReview&&scope.row.planningRank=='B'&&scope.row.category =='B'">
              <i class="iconfont iconalter icon-warning"></i>
              <p class="menu-title-text">材料收集</p>
            </div>
            <!--重点专项、区域、空间：提交审核（暂不支持空间规划提交审批）-->
            <div class="menu-title" @click.stop="approvalRelease(scope.row,scope.index)"
                 v-if="!scope.row.hasReview&&scope.row.planningRank=='A'">
              <i class="iconfont iconalter icon-warning"></i>
              <p class="menu-title-text">材料收集</p>
            </div>
            <!--备案类：提交备案  目前弃用，直接部门自行发布-->
            <!--<div class="menu-title" @click.stop="approvalRelease(scope.row,scope.index)"-->
                 <!--v-if="!scope.row.hasReview&&scope.row.planningRank=='C'&&scope.row.category !='A'">-->
              <!--<i class="iconfont iconalter icon-warning"></i>-->
              <!--<p class="menu-title-text">提交备案</p>-->
            <!--</div>-->
            <!--发展规划：提交审核-->
            <div class="menu-title" @click.stop="approvalRelease(scope.row,scope.index)"
                 v-if="!scope.row.hasReview&&scope.row.category =='A'">
              <i class="iconfont iconalter icon-warning"></i>
              <p class="menu-title-text">材料收集</p>
            </div>
          </template>
        </avue-crud>
      </div>
    </div>
  </basic-container>
</template>
<script>
  import {PROJECT_DIC} from '@/const/dict'
  import {resultPageDept} from "@/api/planning/result";
  import {getAreaByType} from "@/api/system";

  export default {
    name: "planningReleaseList",
    created(){
      var self = this;
      window.resultDetail = self.resultDetail;
      this.getselectedOptionsHistory();
      window.achieveDetail = self.achieveDetail
    },
    data() {
      const getYearDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.YEAR)
      };
      const getApplyForCategoryDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.CATEGORY)
      };
      const getPlanningRankDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_RANK)
      };
      const getLevelDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_LEVEL)
      };
      return {
        headerData: {
          title: '规划列表'
        },
        state: '0,1,2',//状态
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        resultListData: [],
        tableoption: {
          page: true,
          menuWidth: 150,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          cellBtn: false,
          indexWidth:70,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "规划名称",
              width: 300,
              prop: "title",
              cell: true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="resultDetail(\'' + row.achievementId + '\')">' + value + '</a>';
              },
            },
            {
              label: "规划编码",
              prop: "pmuc",
              width: 200,
              cell: true,
            },
            {
              label: "申报单位",
              prop: "orgName",
              cell: true,
            },
            {
              label: "规划类型",
              prop: "category",
              type: "select",
              dicData: PROJECT_DIC.CATEGORY,
              cell: true
            },
            {
              label: "规划等级",
              prop: "planningRank",
              type: "select",
              dicData: PROJECT_DIC.PLANNING_RANK,
              cell: true,
            }
          ]
        },
        option: {
          column: [
            {
              label: "年份",
              prop: "year",
              multiple: false,
              dicData: getYearDic()
            },
            {
              label: "规划类型",
              prop: "categorys",
              multiple: false,
              dicData: getApplyForCategoryDic()
            },
            {
              label: "发布等级",
              prop: "planningRanks",
              multiple: false,
              dicData: getPlanningRankDic()
            },
            {
              label: "发布层级",
              prop: "planningLevels",
              multiple: false,
              dicData: getLevelDic()
            },
            {
              label: "市级",
              prop: "area",
              multiple: false,
              dicData: this.getarea(),
            },
            {
              label: "区县",
              prop: "district",
              multiple: false,
              dicData: this.arealisttempdistrict,
            },
          ]
        },
        selectedOptions: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        resetSelectedOptions: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          areCode: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        selectedOptionsHistory: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        showall: false,
        publicPath: process.env.BASE_URL,
        dictobj: {
          label: '全部',
          value: '-1',
        },
        arealisttemp: [],
        arealisttempdistrict: [],
      };
    },
    watch: {
      'selectedOptions.area'(val) {
        var areacode = val.substring(0, 4);
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: areacode,
          type: "area_code_county",
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttempdistrict = arealist;

          for (var item in this.option.column) {
            if (this.option.column[item].prop == "district") {
              this.option.column[item].dicData = this.arealisttempdistrict;
            }
          }
        })
      }
    },
    methods: {
      getResultList(page) {
        this.tableLoading = true;
        sessionStorage.setItem('subject.selectedOptionsHistory.categorys', this.selectedOptions.categorys);
        sessionStorage.setItem('subject.selectedOptionsHistory.planningRanks', this.selectedOptions.planningRanks);
        sessionStorage.setItem('subject.selectedOptionsHistory.planningLevels', this.selectedOptions.planningLevels);
        sessionStorage.setItem('subject.selectedOptionsHistory.area', this.selectedOptions.area);
        sessionStorage.setItem('subject.selectedOptionsHistory.district', this.selectedOptions.district);
        sessionStorage.setItem('subject.selectedOptionsHistory.year', this.selectedOptions.year);
        sessionStorage.setItem('subject.selectedOptionsHistory.titleLike', this.selectedOptions.titleLike);
        resultPageDept(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states: this.state,
        }, this.filterFormData(this.selectedOptions))).then(response => {
          this.resultListData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false
        })
      },
      refreshChange() {
        this.getResultList(this.page)
      },
      // 搜索
      searchChange(params) {
        this.page.currentPage = 1
        this.getResultList(this.page, this.dealSearchParam(params))
      },
      // 处理搜索过滤
      dealSearchParam(params) {
        if (params.title) {
          params.titleLike = params.title;
          params.title = ''
        }
        if (params.category) {
          params.categorys = params.category;
          params.category = ''
        }
        return params;
      },
      searchSubmit() {
        if (this.selectedOptions.district != -1 && this.selectedOptions.district != '') {
          this.selectedOptions.areaCode = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCode = this.selectedOptions.area
        }
        this.selectedOptions.areaCode = this.selectedOptions.areaCode.substring(0, 6);
        this.getResultList(this.page)
      },
      searchReset() {
        this.selectedOptions = this.resetSelectedOptions;
        this.getResultList(this.page)
      },
      handleChange(form) {

      },
      getarea() {
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: 45,
          type: "area_code_city"
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttemp = arealist;
          for (var item in this.option.column) {
            if (this.option.column[item].prop == "area") {
              this.option.column[item].dicData = this.arealisttemp;
            }
          }
        })
      },
      filterFormData(form) {
        var formMap = {};
        Object.keys(form).forEach(function (name) {
          if (form[name] != -1) {
            formMap[name] = form[name]
          }
        });
        return formMap;
      },
      getselectedOptionsHistory() {
        if (sessionStorage.getItem('subject.selectedOptionsHistory.categorys') != null) {
          this.selectedOptionsHistory.categorys = sessionStorage.getItem('subject.selectedOptionsHistory.categorys')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.planningRanks') != null) {
          this.selectedOptionsHistory.planningRanks = sessionStorage.getItem('subject.selectedOptionsHistory.planningRanks')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.planningLevels') != null) {
          this.selectedOptionsHistory.planningLevels = sessionStorage.getItem('subject.selectedOptionsHistory.planningLevels')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.district') != null) {
          this.selectedOptionsHistory.district = sessionStorage.getItem('subject.selectedOptionsHistory.district')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.year') != null) {
          this.selectedOptionsHistory.year = sessionStorage.getItem('subject.selectedOptionsHistory.year')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.area') != null) {
          this.selectedOptionsHistory.area = sessionStorage.getItem('subject.selectedOptionsHistory.area')
        }
        if (sessionStorage.getItem('subject.selectedOptionsHistory.titleLike') != null) {
          this.selectedOptionsHistory.titleLike = sessionStorage.getItem('subject.selectedOptionsHistory.titleLike')
        }

        var selectedOptionsHistory = this.selectedOptionsHistory;
        this.selectedOptions = selectedOptionsHistory;

        if (this.selectedOptions.district != -1 && this.selectedOptions.district != '') {
          this.selectedOptions.areaCode = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCode = this.selectedOptions.area
        }
        this.selectedOptions.areaCode = this.selectedOptions.areaCode.substring(0, 6)

      },
      // 审批发布
      approvalRelease(row, index) {
        let src = `/approvalRelease/detail/${row.achievementId}`;
        this.$router.push({
          path: src,
          reviewFlag: true,
          query:{
            title:row.title,
            orgName:row.orgName,
            planningRank:row.planningRank,
            category:row.category,
          }
        })
      },
      // 成果详情跳转
      resultDetail(achievementId){
        let src = `/planning/achievement/detail?id=${achievementId}`;
        this.$router.push({
          path: src
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  #searchInput {
    height: 40px;
    border: 1px solid #dadada;
    outline: 0;
    line-height: 40px;
    text-indent: 1rem;
    border-radius: 0.31rem;
  }
  /deep/ .avue-search__tags--active {
    color: #fff;
    background-color: #1890ff;
    border-radius: 5px;
    padding: 5px 10px;
  }
</style>
